<template>
  <div class="c">
    <h4>----------C----------</h4>
    <div>reactive中:{{ student.name }}的年龄{{ student.age }}</div>
    <div>toRefs后:{{ name }}的年龄{{ age }}</div>
    <button @click=changeAge>年龄+1</button>
    <button @click=changeName>修改名字</button>
  </div>
</template>

<script setup lang="ts" name="C">
import { reactive, toRef, toRefs } from "vue"
let student = reactive({ name: "张三", age: 18 })

// 将一个响应式对象中的每一个属性，转换为ref对象。
// 并且改变解构的值，也会影响到原响应式对象的值。
let { name, age } = toRefs(student)
let name2 = toRef(student, "name")
function changeAge() {
  age.value += 1
}
function changeName() {
  student.name += "~"
}
</script>

<style></style>